<script src="../lib/jquery.js"></script>
<script>
// Once you've made an initial selection with jQuery, you can traverse deeper into what was just selected. 
// Traversing can be broken down into three basic parts: parents, children, and siblings

$(function(){
	// [Parents]
	// Selecting an element's direct parent:
	// returns [ div.child ]
	console.log($( "span.subchild" ).parent());
	 
	// Selecting all the parents of an element that match a given selector: 
	// returns [ div.parent ]
	console.log($( "span.subchild" ).parents( "div.parent" )); 
	
	//returns [ div.child, div.parent, div.grandparent ]
	console.log($( "span.subchild" ).parents()); 
	 
	// Selecting all the parents of an element up to, but *not including* the selector:
	// returns [ div.child, div.parent ]
	console.log($( "span.subchild" ).parentsUntil( "div.grandparent" )); 
	 
	// Selecting the closest parent, note that only one parent will be selected
	// and that the initial element itself is included in the search:
	// returns [ div.child ]
	console.log($( "span.subchild" ).closest( "div" )); 
	 
	// returns [ div.child ] as the selector is also included in the search:
	console.log($( "div.child" ).closest( "div" ));
	
	
	
	// [Children]
	// .children() only operates on direct child nodes, while .find() can traverse 
	// recursively into children, children of those children, and so on.
	
	// Selecting an element's direct children:
	// returns [ div.parent, div.surrogateParent1, div.surrogateParent2 ]
	console.log($( "div.grandparent" ).children( "div" )); 
	 
	// Finding all elements within a selection that match the selector: 
	// returns [ div.child, div.parent, div.surrogateParent1, div.surrogateParent2 ]
	console.log($( "div.grandparent" ).find( "div" ));
	
	
	
	// [Siblings]
	// Selecting a next sibling of the selectors: 
	// returns [ div.surrogateParent1 ]
	console.log($( "div.parent" ).next());
	 
	// Selecting a prev sibling of the selectors: 
	// returns [] as No sibling exists before div.parent
	console.log($( "div.parent" ).prev());
	 
	// Selecting all the next siblings of the selector: 
	// returns [ div.surrogateParent1, div.surrogateParent2 ]
	console.log($( "div.parent" ).nextAll());
	 
	// returns [ div.surrogateParent1 ]
	console.log($( "div.parent" ).nextAll().first());
	 
	// returns [ div.surrogateParent2 ]
	console.log($( "div.parent" ).nextAll().last());
	 
	// Selecting all the previous siblings of the selector: 
	// returns [ div.surrogateParent1, div.parent ]
	console.log($( "div.surrogateParent2" ).prevAll());
	 
	// returns [ div.surrogateParent1 ]
	console.log($( "div.surrogateParent2" ).prevAll().first());
	 
	// returns [ div.parent ]
	console.log($( "div.surrogateParent2" ).prevAll().last());
	
	//Selecting an element's siblings in both directions that matches the given selector:
	//returns [ div.surrogateParent1, div.surrogateParent2 ]
	console.log($( "div.parent" ).siblings());
	
	//returns [ div.parent, div.surrogateParent2 ]
	console.log($( "div.surrogateParent1" ).siblings());
});
</script>

<div class="grandparent">
    <div class="parent">
        <div class="child">
            <span class="subchild"></span>
        </div>
    </div>
    <div class="surrogateParent1"></div>
    <div class="surrogateParent2"></div>
</div>